<template>
    <div class="home">
        <el-container>
            <el-header height="130px">
                <HomeHeader></HomeHeader>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <HomeNav></HomeNav>
                </el-aside>
                <el-main>
                    <div class="home_show" v-if="home_show">
                        <HomeCurrent></HomeCurrent>
                    </div>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import HomeHeader from '@/components/home/HomeHeader';
import HomeNav from '@/components/home/HomeNav';
import HomeCurrent from '@/components/home/HomeCurrent';
export default {
    data(){
        return{
            home_show:false
        }
    },
    mounted(){
        this.showHome(this.$route)
    },
    components:{
        HomeHeader,
        HomeNav,
        HomeCurrent
    },
    methods:{
        showHome(value){
            if(value.path === '/home'){
                this.home_show = true
            }else{
                this.home_show = false
            }
        }
    },
    watch:{
        //监听router目的是为了监听path，根据path决定home_show显示不显示
        $route(value){
            this.showHome(value)
        }
    }
}
</script>

<style lang="scss" scoped>

.home {
    .el-container {
        background-color: #B3C0D1;

        .el-header {
            background-color: #B3C0D1;
            color: #333;
        }

        .el-container {
            .el-aside {
                background-color: #D3DCE6;
                color: #333;
            }

            .el-main {
                background-color: #E9EEF3;
                color: #333;
            }
        }
    }
}
</style>